import React, { useState, useEffect } from 'react';
import { useAliveController, useModel, Link } from 'umi';
import { globalStateType } from '@/models/useGlobalModel';
import { Tag } from 'antd';
import styles from './index.less';
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
import classnames from 'classnames';

const KeepAliveTags: React.FC<{}> = () => {
  const [currentContextMenuTag, setCurrentContextMenuTag] = useState<string>('');
  const { drop, clear, refresh } = useAliveController();
  const { cachedRoutes, closeOtherTag, currentRoute, closeTag } = useModel(
    'useGlobalModel',
    (model) => {
      return model;
    },
  );
  useEffect(() => {
    return () => {
      //清楚缓存不然会有很大的缓存bug比如多层弹框；
      setTimeout(() => {
        clear();
      }, 50);
    };
  }, []);
  const activeTag = currentRoute.path;
  const handleClick = (e: any, data: { key: string }) => {
    switch (data.key) {
      case 'refresh':
        refresh(currentRoute.path as string);
        break;
      case 'close':
        closeTag(currentContextMenuTag, drop);
        break;
      case 'closeOther':
        closeOtherTag(currentContextMenuTag, drop);
        break;
    }
  };

  return (
    <div
      className={styles['tag-wrap']}
      onContextMenu={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
        e.preventDefault();
      }}
    >
      {
        <Link
          to={{
            pathname: '/entry/index',
          }}
          className={classnames(
            activeTag === '/entry/index' && styles['active'],
            styles['index-tag'],
          )}
        >
          首页
        </Link>
      }
      {cachedRoutes.map((item: globalStateType['currentRoute'], i: number) => {
        const tag: string = item.path as string;
        return (
          <Link
            to={{
              pathname: tag,
            }}
            key={i.toString(36) + i}
          >
            <ContextMenuTrigger id="context-menu-container">
              <Tag
                onContextMenu={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
                  e.preventDefault();
                  setCurrentContextMenuTag(tag);
                }}
                className={activeTag === tag && styles['active']}
                closable={tag === '/index' ? false : true}
                onClose={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
                  e.preventDefault();
                  closeTag(tag, drop);
                }}
              >
                {item.name || '未命名'}
              </Tag>
            </ContextMenuTrigger>
          </Link>
        );
      })}
      <ContextMenu id="context-menu-container" className={styles['context-menu-container']}>
        <MenuItem data={{ key: 'refresh' }} onClick={handleClick}>
          刷新
        </MenuItem>
        <MenuItem data={{ key: 'close' }} onClick={handleClick}>
          关闭
        </MenuItem>
        <MenuItem divider />
        <MenuItem data={{ key: 'closeOther' }} onClick={handleClick}>
          关闭其他
        </MenuItem>
      </ContextMenu>
    </div>
  );
};
export default KeepAliveTags;
